<template>  
  <div class="lab-info-container">  
    <div class="date-and-day">  
      <p>{{ currentDate }}</p>  
      <p>{{ currentDay }}</p>  
      <a>{{ currentTime }}</a>  
    </div>  
    <div class="icon-and-values">  
      <div class="day-night-icon">
        <div v-if="isDayTime" ><img src="@/assets/太阳.png"/></div>
        <div v-else ><img src="@/assets/月亮.png"/></div> 
      </div>  
      <div class="temp-humidity">  
        <div class="temp-container">  
          <img src="@/assets/温度.png" alt="Temperature Icon">
          <p>温度：{{ temperature }}°C</p>  
        </div>  
        <div class="humidity-container">  
          <img src="@/assets/湿度.png" alt="Humidity Icon">  
          <p>湿度：{{ humidity }}%</p>  
        </div>  
      </div>  
    </div>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'itemFour',  
  data() {  
    return {  
      // 假设的温度和湿度值，可以根据实际情况替换为动态获取的值  
      temperature: 21,  
      humidity: 55,    
      dayIcon: '@/assets/太阳.png',  
      nightIcon: '@/assets/月亮.png', 
      currentTime: '', 
    };  
  },  
  computed: {  
    currentDate() {  
      const now = new Date();  
      const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',  
        'July', 'August', 'September', 'October', 'November', 'December'  
      ];  
      return `${monthNames[now.getMonth()]} ${now.getDate()}, ${now.getFullYear()}`;  
    },  
    currentDay() {  
      const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];  
      const now = new Date();  
      return days[now.getDay()];  
    },  
    isDayTime() {  
      const now = new Date();  
      // 假设白天是早上6点到晚上6点  
      return now.getHours() >= 6 && now.getHours() < 18;  
    },  
  },
  methods: {  
    updateTime() {  
      const now = new Date();  
      const hours = String(now.getHours()).padStart(2, '0');  
      const minutes = String(now.getMinutes()).padStart(2, '0');  
      const seconds = String(now.getSeconds()).padStart(2, '0');  
      this.currentTime = `${hours}:${minutes}:${seconds}`;  
    },  
  },  
  mounted() {  
    // 在组件挂载后开始更新时间  
    this.updateTime(); // 初始设置时间  
    this.interval = setInterval(this.updateTime, 1000); // 每秒更新时间  
  },  
  beforeUnmount() {  
    // 在组件销毁前清除定时器  
    clearInterval(this.interval);  
  },  
};  
</script>  
  
<style scoped>  
.lab-info-container {  
  display: flex;  
  justify-content: space-between;  
  align-items: flex-start;  
  padding: 20px;  
}  
  
.date-and-day {  
  width: 50%;
}  
.date-and-day p{
  color: yellow;
  font-size: 20px;
}  
.date-and-day a{
  color: rgb(142, 249, 255);
  font-size: 25px;
}  
.icon-and-values {  
  width: 55%;  
  display: flex;  
  flex-direction: column;  
  align-items: flex-start;  
}  
  
.day-night-icon img {  
  width: 120px;  
  height: 120px;  
  margin-right: 10px;  
}  
  
.temp-humidity {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
}  
  
.temp-container,  
.humidity-container {  
  display: flex;  
  align-items: center;  
}  
  
.temp-container img,  
.humidity-container img {  
  width: 40px;  
  height: 40px;   
}  
</style>